<template>
  <div class="contentBox">
    <el-card class="box-card">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="基础配置" name="first">
          <el-divider content-position="left">站点配置</el-divider>
          <el-form ref="form" :model="form" label-width="120px">
            <el-form-item label="站点名称">
              <el-input v-model="formData[3]"></el-input>
            </el-form-item>
            <el-form-item label="站点链接">
              <el-input v-model="formData[4]"></el-input>
            </el-form-item>
            <el-form-item label="站点关键字">
              <el-input type="textarea" v-model="formData[5]"></el-input>
            </el-form-item>
            <el-form-item label="是否关闭网站">
              <el-select v-model="formData[6]" placeholder="请选择">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-form>
          <el-divider content-position="left">底部设置</el-divider>
          <el-form ref="form" :model="form" label-width="120px">
            <el-form-item label="备案号">
              <el-input v-model="formData[7]"></el-input>
            </el-form-item>
            <el-form-item label="版权信息">
              <el-input v-model="formData[8]"></el-input>
            </el-form-item>
            <el-form-item label="联系方式">
              <el-input v-model="formData[9]"></el-input>
            </el-form-item>
            <el-form-item label="备案链接地址">
              <el-input v-model="formData[10]"></el-input>
            </el-form-item>
          </el-form>
          <el-divider content-position="left">其他设置</el-divider>
          <el-form ref="form" :model="form" label-width="120px">
            <el-form-item label="黑名单IP">
              <el-input
                type="textarea"
                v-model="formData[11]"
                placeholder="黑名单IP,用逗号隔开,注意英文半角逗号"
              ></el-input>
            </el-form-item>
          </el-form>
          <el-divider></el-divider>
          <el-form ref="form" :model="form" label-width="80px">
            <el-form-item>
              <el-button type="primary" @click="save">保存</el-button>
              <el-button>取消</el-button>
            </el-form-item>
          </el-form>
        </el-tab-pane>
        <el-tab-pane label="系统配置" name="second">
          <el-divider content-position="left">管理系统配置</el-divider>
          <el-form ref="form" :model="form" label-width="120px">
            <el-form-item label="系统名称">
              <el-input v-model="formData[12]"></el-input>
            </el-form-item>
            <el-form-item label="系统logo">
              <el-upload
                class="upload-demo"
                action="https://jsonplaceholder.typicode.com/posts/"
                :on-preview="handlePreview"
                :on-remove="handleRemove"
                :file-list="fileList"
                list-type="picture"
              >
              </el-upload>
              <div class="el-upload__tip">显示在左上角位置,大小建议200*200</div>
            </el-form-item>
            <el-form-item label="网页图标">
              <el-upload
                class="upload-demo"
                action="https://jsonplaceholder.typicode.com/posts/"
                :on-preview="handlePreview"
                :on-remove="handleRemove"
                :file-list="fileList"
                list-type="picture"
              >
              </el-upload>
              <div class="el-upload__tip">
                网页favicon文件,ico类型,建议64*64
              </div>
            </el-form-item>
            <el-form-item label="登录标题">
              <el-input v-model="formData[12]"></el-input>
            </el-form-item>
            <el-form-item label="登录背景图">
              <el-upload
                class="upload-demo"
                action="https://jsonplaceholder.typicode.com/posts/"
                :on-preview="handlePreview"
                :on-remove="handleRemove"
                :file-list="fileList"
                list-type="picture"
              >
              </el-upload>
              <div class="el-upload__tip">建议1920*1080尺寸</div>
            </el-form-item>
          </el-form>
          <el-divider></el-divider>
          <el-form ref="form" :model="form" label-width="80px">
            <el-form-item>
              <el-button type="primary" @click="save">保存</el-button>
              <el-button>取消</el-button>
            </el-form-item>
          </el-form>
        </el-tab-pane>
        <el-tab-pane label="其它设置" name="third">
          <el-divider content-position="left">通知公告</el-divider>
          <el-form ref="form" :model="form" label-width="120px">
            <el-form-item label="公告标题">
              <el-input v-model="formData[13]"></el-input>
            </el-form-item>
            <el-form-item label="通知内容">
              <el-input type="textarea" v-model="formData[16]"></el-input>
            </el-form-item>
          </el-form>
          <el-divider content-position="left">前台图片</el-divider>
          <el-form ref="form" :model="form" label-width="120px">
            <el-form-item label="登录/注册页背景">
              <el-upload
                class="upload-demo"
                action="https://jsonplaceholder.typicode.com/posts/"
                :on-preview="handlePreview"
                :on-remove="handleRemove"
                :file-list="fileList"
                list-type="picture"
              >
              </el-upload>
              <div class="el-upload__tip">尺寸200*200</div>
            </el-form-item>
            <el-form-item label="前台logo">
              <el-upload
                class="upload-demo"
                action="https://jsonplaceholder.typicode.com/posts/"
                :on-preview="handlePreview"
                :on-remove="handleRemove"
                :file-list="fileList"
                list-type="picture"
              >
              </el-upload>
              <div class="el-upload__tip">尺寸168*70,透明,白色</div>
            </el-form-item>
          </el-form>
          <el-divider></el-divider>
          <el-form ref="form" :model="form" label-width="80px">
            <el-form-item>
              <el-button type="primary" @click="save">保存</el-button>
              <el-button>取消</el-button>
            </el-form-item>
          </el-form></el-tab-pane
        >
      </el-tabs>
    </el-card>
  </div>
</template>

<script>
import { getAllSysConfigAPI } from '@/api/authorityManagement/sys'
export default {
  name: 'sys',
  data () {
    return {
      activeName: 'first',
      form: {
        name: ''
      },
      formData: [],
      options: [
        {
          value: '1',
          label: '是'
        },
        {
          value: '0',
          label: '否'
        }
      ],
      value: '',
      fileList: [
        {
          name: 'food.jpeg',
          url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
        }
      ]
    }
  },
  methods: {
    handleRemove () {},
    handlePreview () {},
    save () {
      console.log('保存信息')
    },
    handleClick (tab, event) {
      console.log(tab, event)
    },
    async getAllSysConfig () {
      const { data } = await getAllSysConfigAPI()
      this.form = data
      data.allData.forEach(item => {
        this.formData.push(item.attr_value)
      })

      console.log(data)
    }
  },
  created () {
    this.getAllSysConfig()
  }
}
</script>

<style lang="scss" scoped>
.contentBox {
  padding: 10px 20px;
}

.el-tab-pane {
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  padding: 20px;
}

// 表单大小
.el-form {
  margin: 0 auto;
  width: 50%;
  ::v-deep .el-textarea__inner {
    min-height: 100px !important;
  }
}

// 上传图片样式
.upload-demo {
  line-height: 0;
}
</style>
